<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  PropType,
  nextTick,
  onUpdated,
  onUnmounted,
} from "vue";
import EsriConfig from "@arcgis/core/config";
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
// import ScaleBar from "@arcgis/core/widgets/ScaleBar";
// import Zoom from "@arcgis/core/widgets/Zoom";

import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import TileLayer from "@arcgis/core/layers/TileLayer";
import Basemap from "@arcgis/core/Basemap";

import { config } from "@/config/index";

//页面只做第一次加载
let isInitMap = false;
export default defineComponent({
  name: "ServePreview",
  setup(props, { emit, expose }) {
    //地图
    let map: any = null;
    //视图
    let view = null;
    //当前预览的服务
    let currentType: number = 1; //默认是矢量
    let currentServe: any = null;

    //地图引用
    const mapRef = ref(null);
    //展示状态
    const isShow = ref(false);

    //打开弹窗
    const open = (type: number, layer: string) => {
      console.log("服务图层", type, layer);
      isShow.value = true;
      if (layer) {
        currentType = type;
        currentServe = layer;
      }
    };

    //关闭弹窗
    const close = () => {
      isShow.value = false;
      map.removeAll();
    };

    //ref暴露
    expose({ open });

    //地图初始化
    const initMap = () => {
      EsriConfig.apiKey = config.map_preview_config.apiKey;
      let basemap = new Basemap({
        baseLayers: [
          new TileLayer({
            url: config.map_preview_config.baseMap,
            title: "Basemap",
          }),
        ],
        title: "basemap",
        id: "basemap",
      });

      console.log("basemap", basemap);

      map = new Map({ basemap: basemap });

      view = new MapView({
        container: "mapViewDiv",
        map: map,
        center: config.map_preview_config.center,
        zoom: config.map_preview_config.zoom,
        extent: {
          xmin: -8649827.836014,
          ymin: 5327540.8426351305,
          xmax: -8630753.997105986,
          ymax: 5352890.850468009,
          spatialReference: {
            wkid: 102100,
          },
        },
      });

      //去logo
      view.ui.components = [];
      // let scaleBar = new ScaleBar({
      //   view: view,
      // });
      // let zoomCom = new Zoom({
      //   view: view,
      // });
      // view.ui.add(scaleBar, "bottom-left");
      // view.ui.add(zoomCom, "bottom-right");
      console.log("地图", map);
    };

    onUpdated(() => {
      console.log("更新事件：", isInitMap, mapRef.value);
      if (!isInitMap && isShow.value) {
        //不用nextTick影响性能
        initMap();
        isInitMap = true;
      }

      //存在服务
      if (currentServe && isShow.value) {
        //判断是否添加过该图层
        if (map.layers.find((layer: any) => layer.url == currentServe))
          console.log("已有地图添加图层");
        else {
          //添加新图层
          console.log("添加新图层");
          let previewLayer = null;
          switch (currentType) {
            case 1:
              previewLayer = new TileLayer({
                url: currentServe,
              });
              console.log("添加图层1", previewLayer);
              break;
            case 2:
              previewLayer = new MapImageLayer({
                url: currentServe,
              });
              console.log("添加图层2", previewLayer);
              break;

            default:
              console.log("默认处理不添加");
              break;
          }
          previewLayer?.load().then(function () {
            console.log("图层准备完毕，地图添加图层");
          });
          console.log("previewLayer", previewLayer);
          map.add(previewLayer);
          //console.log("图层添加失败！");
        }
      }
    });

    onUnmounted(() => {
      isInitMap = false;
    });

    return {
      isShow,
      close,
      mapRef,
    };
  },
});
</script>

<template>
  <div>
    <el-dialog v-model="isShow" title="服务预览" width="40%" @close="close">
      <!-- 地图 -->
      <div id="mapViewDiv" ref="mapRef"></div>
    </el-dialog>
  </div>
</template>

<style>
#mapViewDiv {
  padding: 0;
  margin: 0;
  height: 400px;
  width: 100%;
}
.coordinate {
  position: absolute;
  bottom: 25px;
  left: 33px;
  font-size: 0.8em;
}
</style>
